<template>
  <div class="widget-item-container" style="height: 100%">
    <template v-if="display">
      <div
        class="display_style"
        :class="{
          border_active: ['tabs', 'grid', 'buttonArea', 'foldedPanel', 'divLayout'].includes(
            element.element_control,
          ),
        }"
      >
        <span>
          {{
            ['uploadForm'].includes(element.element_control) && element.element_sideButton
              ? ''
              : element.element_name
          }}
        </span>
      </div>
    </template>
    <template v-if="element.element_control === 'grid' && !display">
      <ElRow
        class="widget-col widget-view"
        type="flex"
        v-if="element.id"
        :key="element.id"
        :class="{ active: selectWidget?.id === element.id }"
        :gutter="element.options.gutter ?? 0"
        :justify="element.options.justify"
        :align="element.options.align"
        @click.stop="handleItemClick(element)"
      >
        <ElCol v-for="(col, colIndex) of element.columns" :key="colIndex" :span="col.span ?? 0">
          <draggable
            class="widget-col-list"
            item-key="id"
            ghostClass="ghost"
            handle=".drag-widget"
            :animation="200"
            :group="{ name: 'people' }"
            :no-transition-on-drag="true"
            v-model="col.list"
            @add="handleListMoveAdd($event, element, colIndex)"
          >
            <template #item="{ element, index }">
              <transition-group
                name="fade"
                tag="div"
                class="mike_group"
                :style="{
                  width: element.width,
                  height: element.height,
                  marginTop: element.element_marginTop,
                  marginBottom: element.element_marginBottom,
                }"
              >
                <WidgetFormItem
                  v-if="element.id"
                  :key="element.id"
                  :element="element"
                  :display="false"
                  :list="col.list"
                  :allData="allData"
                  :config="config"
                  :area="area"
                  :selectWidget="selectWidget"
                  @click.stop="handleItemClick(element)"
                  @copy="handleCopyClick(index, col.list, area, allData)"
                  @delete="handleDeleteClick(index, col.list, area, allData)"
                  @update:widgetFormSelectCore="updateWidgetFormSelectCore"
                  @update:widgetFormCore="updateWidgetFormCore"
                />
              </transition-group>
            </template>
          </draggable>
        </ElCol>
      </ElRow>
    </template>
    <template v-if="element.element_control === 'tabs' && !display">
      <ElTabs
        @click.stop="handleItemClick(element)"
        :modelValue="element.panes[0].name"
        :stretch="element.options.stretch"
        :type="element.options.type"
        :tab-position="element.options.tab_position"
        v-if="element.id"
        :key="element.id"
        class="widget-col"
        :class="{ active: selectWidget?.id === element.id }"
      >
        <ElTabPane
          v-for="(col, colIndex) of element.panes"
          :key="col.name"
          :label="col.label"
          :name="col.name"
        >
          <draggable
            class="widget-col-list"
            item-key="id"
            ghostClass="ghost"
            handle=".drag-widget"
            :animation="200"
            :group="{ name: 'people' }"
            v-model="col.list"
            :no-transition-on-drag="true"
            @add="handleListMoveAdd($event, element, colIndex)"
          >
            <template #item="{ element, index }">
              <transition-group
                name="fade"
                tag="div"
                class="mike_group"
                :style="{
                  width: element.width,
                  height: element.height,
                  marginTop: element.element_marginTop,
                }"
              >
                <WidgetFormItem
                  v-if="element.id"
                  :key="element.id"
                  :element="element"
                  :display="false"
                  :list="col.list"
                  :allData="allData"
                  :config="config"
                  :area="area"
                  :selectWidget="selectWidget"
                  @click.stop="handleItemClick(element)"
                  @copy="handleCopyClick(index, col.list, area, allData)"
                  @delete="handleDeleteClick(index, col.list, area, allData)"
                  @update:widgetFormSelectCore="updateWidgetFormSelectCore"
                  @update:widgetFormCore="updateWidgetFormCore"
                />
              </transition-group>
            </template>
          </draggable>
        </ElTabPane>
      </ElTabs>
    </template>
    <template v-if="element.element_control === 'buttonArea' && !display">
      <div class="widget-col widget-view" :class="{ active: selectWidget?.id === element.id }">
        <draggable
          class="widget-col-list widget-button-list"
          item-key="id"
          ghostClass="ghost"
          handle=".drag-widget"
          :animation="200"
          :group="{ name: 'people' }"
          :no-transition-on-drag="true"
          :list="element.list"
          @add="handleButtonMoveAdd($event, element, 'buttonArea')"
        >
          <template #item="{ element, index }">
            <transition-group
              name="fade"
              tag="div"
              class="mike_group"
              :style="{
                width: '100%',
                height: element.height,
                marginTop: element.element_marginTop,
              }"
            >
              <WidgetFormItem
                v-if="element.id"
                :key="element.id"
                :element="element"
                :display="false"
                :list="element"
                :allData="allData"
                :config="config"
                :area="area"
                :selectWidget="selectWidget"
                @click.stop="handleItemClick(element)"
                @copy="handleCopyClick(index, element, area, allData)"
                @delete="handleDeleteClick(index, element, area, allData)"
                @update:widgetFormSelectCore="updateWidgetFormSelectCore"
                @update:widgetFormCore="updateWidgetFormCore"
              />
            </transition-group>
          </template>
        </draggable>
      </div>
    </template>
    <template v-if="element.element_control === 'foldedPanel' && !display">
      <div class="widget-col widget-view" :class="{ active: selectWidget?.id === element.id }">
        <template v-for="(col, colIndex) of element.panel" :key="colIndex">
          <div class="foldedPanel-top" v-if="element.element_foldShowType === '0'">
            <div class="title" :style="{ background: element.element_color }">
              <span class="title_after" :style="{ borderLeftColor: element.element_color }"></span>
              <span
                class="title_text"
                :style="{
                  fontSize:
                    element.fontSize == '0' ? '13px' : element.fontSize == '1' ? '20px' : '27px',
                }"
                >{{ element.element_name }}</span
              >
              <span class="title_before"></span>
            </div>
            <SvgIcon
              name="foldShow"
              size="20"
              @click="show = !show"
              class="foldIons"
              :style="{ transform: show ? 'rotate(180deg)' : 'rotate(0deg)' }"
            />
          </div>
          <div
            v-else
            class="foldedPanel-top-button"
            :style="{
              fontSize:
                element.fontSize == '0' ? '13px' : element.fontSize == '1' ? '20px' : '27px',
            }"
          >
            <SvgIcon
              name="floldShowButton"
              size="20"
              @click="show = !show"
              class="foldIons"
              :style="{
                transform: show ? 'rotate(180deg)' : 'rotate(0deg)',
              }"
            />
            {{ element.element_name }}
          </div>
          <ElCollapseTransition v-show="show">
            <draggable
              class="widget-col-list widget-foldedPanel-list"
              item-key="id"
              ghostClass="ghost"
              handle=".drag-widget"
              :animation="200"
              :group="{ name: 'people' }"
              :no-transition-on-drag="true"
              v-model="col.list"
              @add="handleListMoveAdd($event, element, colIndex)"
              style="min-height: 200px"
            >
              <template #item="{ element, index }">
                <transition-group
                  name="fade"
                  tag="div"
                  class="mike_group"
                  :style="{
                    width: element.width,
                    height: element.height,
                    marginTop: element.element_marginTop,
                  }"
                >
                  <WidgetFormItem
                    v-if="element.id"
                    :key="element.id"
                    :element="element"
                    :display="false"
                    :list="element"
                    :allData="allData"
                    :config="config"
                    :area="area"
                    :selectWidget="selectWidget"
                    @click.stop="handleItemClick(element)"
                    @copy="handleCopyClick(index, col.list, area, allData)"
                    @delete="handleDeleteClick(index, col.list, area, allData)"
                    @update:widgetFormSelectCore="updateWidgetFormSelectCore"
                    @update:widgetFormCore="updateWidgetFormCore"
                  />
                </transition-group>
              </template>
            </draggable>
          </ElCollapseTransition>
        </template>
      </div>
    </template>
    <template v-if="element.element_control === 'divLayout' && !display">
      <div class="widget-col widget-view" :class="{ active: selectWidget?.id === element.id }">
        <template v-for="(col, colIndex) of element.div_list" :key="colIndex">
          <draggable
            class="widget-col-list widget-divLayout-list"
            item-key="id"
            ghostClass="ghost"
            handle=".drag-widget"
            :animation="200"
            :group="{ name: 'people' }"
            :no-transition-on-drag="true"
            v-model="col.list"
            @add="handleListMoveAdd($event, element, colIndex)"
          >
            <template #item="{ element, index }">
              <transition-group
                name="fade"
                tag="div"
                class="mike_group"
                :style="{
                  width: element.width,
                  height: element.height,
                  marginTop: element.element_marginTop,
                }"
              >
                <WidgetFormItem
                  v-if="element.id"
                  :key="element.id"
                  :element="element"
                  :display="false"
                  :list="col.list"
                  :allData="allData"
                  :config="config"
                  :area="area"
                  :selectWidget="selectWidget"
                  @click.stop="handleItemClick(element)"
                  @copy="handleCopyClick(index, col.list, area, allData)"
                  @delete="handleDeleteClick(index, col.list, area, allData)"
                  @update:widgetFormSelectCore="updateWidgetFormSelectCore"
                  @update:widgetFormCore="updateWidgetFormCore"
                />
              </transition-group>
            </template>
          </draggable>
        </template>
      </div>
    </template>

    <ElFormItem
      class="widget-view"
      v-if="
        element &&
        !display &&
        !['tabs', 'grid', 'buttonArea', 'foldedPanel', 'divLayout'].includes(
          element.element_control,
        )
      "
      style="height: 100%"
      :style="{
        paddingBottom: ['divider'].includes(element.element_control) ? '0' : '18px',
        display: element.element_control === 'divider' ? 'flex' : 'flex',
        alignItems: element.element_control === 'divider' ? 'center' : 'inherit',
      }"
      :key="element.id"
      :label-width="
        ['tabs', 'divider', 'tips'].includes(element.element_control)
          ? '0px'
          : ['uploadForm'].includes(element.element_control) && element.element_sideButton
          ? '0px'
          : element.element_name == ''
          ? '0px'
          : ''
      "
      :class="{
        active: selectWidget?.id === element.id,
        isButton: ['button', 'copyRow'].includes(element.element_control),
      }"
      :rules="element.rules"
      :label="
        [
          'button',
          'tabs',
          'grid',
          'buttonArea',
          'foldedPanel',
          'divider',
          'copyRow',
          'tips',
          'divLayout',
        ].includes(element.element_control)
          ? ''
          : ['uploadForm'].includes(element.element_control) && element.element_sideButton
          ? ''
          : element.element_name
      "
    >
      <template v-if="element.element_control === 'filePreview'">
        <FilePreview :urlAction="element.element_action" :type="element.element_type" />
      </template>
      <!-- :rules="element.options.rules" -->
      <template v-if="element.element_control === 'button'">
        <ElButton
          :style="{
            color:
              !element.element_color &&
              ['primary', 'success', 'info', 'warning', 'danger'].includes(
                element.element_button_type,
              )
                ? '#FFF'
                : element.element_color && element.element_button_type === 'text'
                ? element.element_color
                : element.element_color && element.element_button_type !== 'text'
                ? '#FFF'
                : '#000',
            width: element.widthOf,
            height: element.heightOf,
            background: element.element_button_type === 'text' ? '' : element.element_color,
            borderColor: element.element_button_type === 'text' ? '' : element.element_color,
          }"
          :disabled="element.disabled"
          :loading="element.element_button_loading"
          :type="element.element_button_type"
        >
          <div class="prefix_icons" v-html="element.element_nameprefix"></div>
          {{ element.element_name }}
          <div class="suffix_icons" v-html="element.element_namesuffix"></div>
        </ElButton>
      </template>

      <template v-if="element.element_control === 'copyRow'">
        <ElButton
          :style="{
            color:
              !element.element_color &&
              ['primary', 'success', 'info', 'warning', 'danger'].includes(
                element.element_button_type,
              )
                ? '#FFF'
                : element.element_color && element.element_button_type === 'text'
                ? element.element_color
                : element.element_color && element.element_button_type !== 'text'
                ? '#FFF'
                : '#000',
            width: element.widthOf,
            height: element.heightOf,
            background: element.element_button_type === 'text' ? '' : element.element_color,
            borderColor: element.element_button_type === 'text' ? '' : element.element_color,
          }"
          :disabled="element.disabled"
          :loading="element.element_button_loading"
          :type="element.element_button_type"
        >
          <div class="prefix_icons" v-html="element.element_nameprefix"></div>
          {{ element.element_name }}
          <div class="suffix_icons" v-html="element.element_namesuffix"></div>
        </ElButton>
      </template>

      <template
        v-if="
          ['input', 'popText', 'userChoice', 'dynamicParameters', 'inputScan'].includes(
            element.element_control,
          )
        "
      >
        <ElInput
          :modelValue="element.element_inpt"
          :disabled="element.disabled"
          :style="{ width: element.widthOf }"
          :placeholder="element.element_placeholder"
          :maxlength="parseInt(element.maxlength)"
          :show-word-limit="element.showWordLimit"
          :clearable="element.clearable"
        >
          <!-- readonly 不显示字数 -->
          <template #prefix v-if="element.element_nameprefix">
            <span v-html="element.element_nameprefix"></span>
          </template>
          <template #suffix>
            <span v-html="element.element_namesuffix"></span>
          </template>
          <template #prepend v-if="element.element_prepend">
            <span v-html="element.element_prepend"></span>
          </template>
          <template #append v-if="element.element_append">
            <span v-html="element.element_append"></span>
          </template>
        </ElInput>
      </template>

      <!-- <template v-if="element.element_control === 'password'">
        <ElInput
          readonly
          :modelValue="element.options.defaultValue"
          :style="{ width: element.options.width }"
          :placeholder="element.options.placeholder"
          :maxlength="parseInt(element.options.maxlength)"
          :clearable="element.options.clearable"
          :disabled="element.options.disabled"
          :show-password="element.options.showPassword"
        >
          <template #prefix v-if="element.options.prefix">
            {{ element.options.prefix }}
          </template>
          <template #suffix v-if="element.options.suffix">
            {{ element.options.suffix }}
          </template>
          <template #prepend v-if="element.options.prepend">
            {{ element.options.prepend }}
          </template>
          <template #append v-if="element.options.append">
            {{ element.options.append }}
          </template>
        </ElInput>
      </template>
 -->
      <template v-if="element.element_control === 'textarea'">
        <ElInput
          type="textarea"
          resize="none"
          :rows="element.rows"
          :modelValue="element.element_inpt"
          :style="{ width: element.widthOf, height: '100%' }"
          :placeholder="element.element_placeholder"
          :maxlength="parseInt(element.maxlength)"
          :show-word-limit="element.showWordLimit"
          :autosize="element.autosize"
          :clearable="element.clearable"
          :disabled="element.disabled"
        />
      </template>

      <template v-if="element.element_control === 'processAdvice'">
        <ElInput
          type="textarea"
          resize="none"
          :style="{ width: element.widthOf, height: '100%' }"
        />
      </template>

      <template v-if="element.element_control === 'images'">
        <ElImage
          :style="{ width: element.widthOf, height: '100%' }"
          :src="element.element_action"
        />
      </template>

      <!-- <template v-if="element.element_control === 'number'">
        <ElInputNumber
          :modelValue="element.options.defaultValue"
          :style="{ width: element.options.width }"
          :max="element.options.max"
          :min="element.options.min"
          :disabled="element.options.disabled"
        />
      </template> -->

      <template v-if="element.element_control === 'radio'">
        <ElRadioGroup
          :modelValue="element.element_inpt"
          :style="{ width: element.width }"
          :disabled="element.disabled"
        >
          <ElRadio
            v-for="item in conRadioData"
            :key="item.value"
            :label="item.label"
            :style="{ width: element.widthOf, height: '100%' }"
            :value="item.value"
          />
        </ElRadioGroup>
      </template>

      <template v-if="element.element_control === 'checkbox'">
        <ElCheckboxGroup
          :modelValue="element.element_inpt"
          :style="{ width: element.width }"
          :disabled="element.disabled"
          class="stylEvade"
        >
          <ElCheckbox
            v-for="item in conRadioData"
            :key="item.value"
            :label="item.label"
            :style="{ width: element.widthOf, height: '100%' }"
            :value="item.value"
          />
        </ElCheckboxGroup>
      </template>

      <template v-if="element.element_control === 'time'">
        <ElTimePicker
          v-if="element.element_type === 'time'"
          :modelValue="element.element_inpt"
          :placeholder="element.element_placeholder"
          :editable="element.element_editable"
          :clearable="element.clearable"
          :type="element.element_type"
          :disabled="element.disabled"
          :style="{ width: element.widthOf ?? '100%', height: '100%' }"
        />
        <ElDatePicker
          v-if="element.element_type != 'time'"
          :modelValue="element.element_inpt"
          :placeholder="element.element_placeholder"
          :editable="element.element_editable"
          :clearable="element.clearable"
          :type="element.element_type"
          :format="element.element_format"
          :disabled="element.disabled"
          :style="{ width: element.widthOf ?? '100%', height: '100%' }"
        />
      </template>
      <!-- <template v-if="element.element_control === 'time'">
        <ElTimePicker
          :modelValue="element.options.defaultValue"
          :placeholder="element.options.placeholder"
          :readonly="element.options.readonly"
          :editable="element.options.editable"
          :clearable="element.options.clearable"
          :format="element.options.format"
          :disabled="element.options.disabled"
          :style="{ width: element.options.width }"
        />
      </template>

      -->

      <template v-if="element.element_control === 'rate'">
        <ElRate
          :modelValue="element.element_inpt"
          :max="element.maxlength"
          :allowHalf="element.allowHalf"
        />
      </template>
      <!-- :multiple="
            element.multiple ? element.multiple : element.element_type === '1' ? true : false
          " -->
      <template v-if="element.element_control === 'select'">
        <ElSelect
          :modelValue="element.element_inpt"
          :placeholder="element.element_placeholder"
          :clearable="element.clearable"
          :filterable="element.filterable"
          :disabled="element.disabled"
          :style="{ width: element.widthOf }"
        >
          <ElOption
            v-for="item in conRadioData"
            :key="item.value"
            :value="item.value"
            :label="item.label"
          />
        </ElSelect>
      </template>

      <template v-if="element.element_control === 'switch'">
        <ElSwitch
          :modelValue="element.element_inpt"
          inline-prompt
          :active-text="element.activeText"
          :inactive-text="element.inactiveText"
          :active-value="element.element_activeValue"
          :inactive-value="element.element_inactiveValue"
          :disabled="element.disabled"
          :loading="element.element_button_loading"
        />
      </template>

      <template v-if="element.element_control === 'slider'">
        <ElSlider
          :modelValue="element.element_inpt"
          :min="element.minlength"
          :max="element.maxlength"
          :step="element.step"
          :range="element.range"
          :disabled="element.disabled"
        />
      </template>

      <template v-if="element.element_control == 'text'">
        <!-- <ElInput
          type="text"
          resize="none"
          readonly
          :rows="element.options.rows"
          :modelValue="element.options.defaultValue"
          :style="{ width: element.options.width }"
          :placeholder="element.options.placeholder"
          :maxlength="parseInt(element.options.maxlength)"
          :show-word-limit="element.options.showWordLimit"
          :autosize="element.options.autosize"
          :clearable="element.options.clearable"
          :disabled="element.options.disabled"
        /> -->
        <span>{{ element.element_inpt }}</span>
      </template>
      <!-- :multiple="element.multiple ? element.multiple : element.element_type === '1'" -->
      <template v-if="element.element_control === 'uploadForm'">
        <ElUpload
          :name="element.element_code"
          :action="element.element_action"
          :accept="element.accept"
          :listType="element.listType"
          :show-file-list="element.element_showFileList"
          :limit="element.limit"
          :style="{ width: element.width, height: element.height }"
        >
          <!-- :file-list="element.element_inpt" -->
          <!-- <SvgIcon v-if="element.listType === 'picture-card'" name="insert" /> -->
          <ElButton
            :style="{
              color: element.element_color ? '#FFF' : '',
              width: element.widthOf,
              height: element.heightOf,
              background: element.element_color,
              borderColor: element.element_color,
            }"
            :type="element.element_button_type"
            :disabled="element.disabled"
            :loading="element.element_button_loading"
          >
            <div
              class="prefix_icons"
              style="margin-right: 10px"
              v-html="element.element_nameprefix"
            ></div>
            {{ element.element_button_name }}
            <div
              class="suffix_icons"
              style="margin-left: 10px"
              v-html="element.element_namesuffix"
            ></div>
          </ElButton>
        </ElUpload>
      </template>

      <template v-if="element.element_control === 'richtext'">
        <RichTextEditor :value="element.element_inpt" :style="{ width: element.width }" />
      </template>
      <template v-if="element.element_control === 'cascader'">
        <ElCascader
          :props="propsCascader"
          :modelValue="element.element_inpt"
          :placeholder="element.element_placeholder"
          :filterable="element.filterable"
          :clearable="element.clearable"
          :disabled="element.disabled"
          :show-all-levels="!element.showAllLevels"
          :style="{ width: element.widthOf || '100%' }"
          ref="cascader"
          v-if="element.dynamicLoading"
          @change="handleChangeCascader"
        />
        <ElCascader
          ref="cascader"
          @change="handleChangeCascader"
          :props="{ multiple: element.multiple, checkStrictly: !element.checkStrictly }"
          :modelValue="element.element_inpt"
          :options="Mock"
          :placeholder="element.element_placeholder"
          :filterable="element.filterable"
          :clearable="element.clearable"
          :disabled="element.disabled"
          :show-all-levels="!element.showAllLevels"
          :style="{ width: element.widthOf || '100%' }"
          v-if="!element.dynamicLoading"
        />
      </template>
      <template v-if="element.element_control === 'divider'">
        <ElDivider
          :direction="element.options.direction"
          :border-style="element.options.border_style"
          :content-position="element.options.content_position"
        >
          <span
            v-html="element.options.element_IconsText"
            :style="{ fontSize: element.fontSize, color: element.element_color }"
          ></span>
        </ElDivider>
      </template>
      <template v-if="element.element_control === 'timeLine'">
        <ElTimeline>
          <ElTimelineItem
            v-for="(item, index) in timeLineType"
            :key="index"
            :timestamp="item.timestamp"
            :placement="element.element_placement"
            :type="element.element_typeSuccess"
          >
            <p>{{ item.label }}</p>
            <p>{{ item.value }}</p>
          </ElTimelineItem>
        </ElTimeline>
      </template>
      <template v-if="element.element_control === 'steps'">
        <ElSteps
          :direction="element.direction"
          :space="element.element_space"
          :active="element.element_active"
          :finish-status="element.element_active"
          :simple="element.element_simple"
          :process-status="element.element_processStatus"
          :align-center="element.element_alignCenter"
        >
          <ElStep
            :title="item.label"
            :description="item.value"
            v-for="(item, index) in StepsList"
            :key="index"
            :class="{ activeSetp: element.element_IconsText }"
          >
            <template #icon v-if="element.element_IconsText != ''">
              <span v-html="element.element_IconsText"></span>
            </template>
          </ElStep>
        </ElSteps>
      </template>
      <template v-if="element.element_control === 'tips'">
        <ElTooltip :content="element.element_tipsText" :placement="element.element_placement">
          <span
            style="display: flex; justify-content: center; align-items: center; height: 100%"
            v-html="element.element_tipsIcon"
          ></span>
        </ElTooltip>
      </template>
    </ElFormItem>
    <div
      class="widget-view-action"
      :class="{
        mike_active: ['tabs', 'grid', 'buttonArea', 'foldedPanel', 'divLayout'].includes(
          element.element_control,
        ),
      }"
      v-if="selectWidget?.id === element.id && !hidden && !display"
    >
      <SvgIcon
        name="copy"
        v-if="!['processAdvice'].includes(element.element_control)"
        @click.stop="emit('copy')"
      />
      <SvgIcon name="delete" @click.stop="emit('delete')" />
    </div>

    <div
      class="widget-view-drag"
      :class="{
        mike_active: ['tabs', 'grid', 'buttonArea', 'foldedPanel', 'divLayout'].includes(
          element.element_control,
        ),
      }"
      v-if="selectWidget?.id === element.id && !display"
    >
      <SvgIcon name="move" className="drag-widget" />
    </div>
    <div
      class="widget-view-action"
      style="height: 20px; line-height: 20px; bottom: 0"
      :class="{
        mike_active: ['tabs', 'grid', 'buttonArea', 'foldedPanel', 'divLayout'].includes(
          element.element_control,
        ),
      }"
      v-if="selectWidget?.id === element.id && display"
    >
      <SvgIcon v-if="!hidden" size="14" name="copy" @click.stop="emit('copy')" />
      <SvgIcon size="14" name="delete" @click.stop="emit('delete')" />
    </div>

    <div
      class="widget-view-drag"
      :class="{
        mike_active: ['tabs', 'grid', 'buttonArea', 'foldedPanel', 'divLayout'].includes(
          element.element_control,
        ),
      }"
      v-if="selectWidget?.id === element.id && display"
      style="height: 20px; line-height: 20px"
    >
      <SvgIcon name="move" size="14" className="drag-widget" />
    </div>
  </div>
</template>

<script lang="ts" setup>
  const show = ref<boolean>(true);
  const cascader = ref();
  document.body.ondrop = function (event) {
    event.preventDefault();
    event.stopPropagation();
  };
  import { cloneDeep } from 'lodash';
  // PropType, watch
  import { v4 } from 'uuid';
  import draggable from 'vuedraggable';
  import { conRadioData } from '@/types/element';
  import Mock from '../../../../../../../mock/Unitregein/mock.json';
  import { WidgetFormType, timeLineType, StepsList } from '@/types/element';
  const props = defineProps({
    config: {
      type: Object as PropType<WidgetFormType['config']>,
      required: true,
    },
    element: {
      type: Object,
      required: true,
    },
    selectWidget: {
      type: Object,
    },
    hidden: {
      type: Boolean,
      default: false,
    },
    // 代表隐藏区/回收站以另种展示方式
    display: {
      type: Boolean,
      default: false,
    },
    list: {
      type: Array,
    },
    allData: {
      type: Object,
      default: () => {},
    },
    area: {
      type: String,
      default: 'display_area',
    },
  });
  const lazyRef = ref<boolean>(false);
  const multipleRef = ref<boolean>(false);
  const checkStrictly = ref<boolean>(false);
  const emit = defineEmits<Emits>();
  interface Emits {
    (e: 'copy'): void;
    (e: 'delete'): void;
    (e: 'update:widgetFormSelectCore', value: Array<any> | any): void;
    (e: 'update:widgetFormCore', value?: any, list?: any, id?: string, copyData?: object): void;
  }
  watch(props, (value: any) => {
    if (value.element) {
      lazyRef.value = value.element.dynamicLoading as boolean;
      multipleRef.value = value.element.multiple as boolean;
      if (value.element.checkStrictly) {
        checkStrictly.value = false;
      } else {
        checkStrictly.value = true;
      }
    }
  });
  const handleChangeCascader = () => {
    nextTick(() => {
      console.log(cascader.value.getCheckedNodes());
    });
  };
  const propsCascader = reactive({
    lazy: lazyRef,
    multiple: multipleRef,
    checkStrictly: checkStrictly,
    lazyLoad(node, resolve) {
      const { level } = node;
      setTimeout(() => {
        const nodes = Mock.map((item) => ({
          value: item.value,
          label: item.label,
          disabled: item.disabled,
          leaf: level >= 2,
        }));
        // Invoke `resolve` callback to return the child nodes data and indicate the loading is finished.
        resolve(nodes);
      }, 1000);
    },
  });
  const handleFunction = (list: any, index: number) => {
    if (list.length - 1 === index) {
      if (index === 0) {
        nextTick(() => updateWidgetFormSelectCore(null));
      } else {
        updateWidgetFormSelectCore(list[index - 1]);
      }
    } else {
      updateWidgetFormSelectCore(list[index + 1]);
    }
  };
  const handleDeleteClick = (index: number, list: any, area: string, allData: any) => {
    let oldList;
    const listRef = ref<any>();
    for (let i = 0; i < allData[area].length; i++) {
      if (allData[area][i].list && allData[area][i].list.length) {
        if (allData[area][i].list[index] === list) {
          listRef.value = allData[area][i].list;
        }
        list = listRef.value;
      }
    }
    if (area == 'display_area') {
      oldList = allData.display_area;
      handleFunction(list, index);
      emit('update:widgetFormCore', {
        ...props.allData,
        display_area: handleListDelete(list[index].id, oldList),
      });
    } else if (area == 'hidden_area') {
      oldList = allData.hidden_area;
      handleFunction(list, index);
      emit('update:widgetFormCore', {
        ...props.allData,
        hidden_area: handleListDelete(list[index].id, oldList),
      });
    } else if (area == 'trash_area') {
      oldList = allData.trash_area;
      handleFunction(list, index);
      emit('update:widgetFormCore', {
        ...props.allData,
        trash_area: handleListDelete(list[index].id, oldList),
      });
    } else if (area == 'button_area') {
      oldList = allData.button_area;
      handleFunction(list, index);
      emit('update:widgetFormCore', {
        ...props.allData,
        button_area: handleListDelete(list[index].id, oldList),
      });
    }
  };

  const handleListMoveAdd = (event: any, row: any, index: string | number | symbol) => {
    const { newIndex, oldIndex, item } = event;
    let list;
    if (props.list) {
      list = cloneDeep(props.list);
    } else {
      list = row.columns || row.panes || row.div_list || row.panel;
    }
    if (item.className.includes('data-grid')) {
      item.tagName === 'DIV' && list.splice(oldIndex, 0, row.columns[index].list[newIndex]);
      row.columns[index].list.splice(newIndex, 1);
      return false;
    }
    if (row.element_control === 'grid') {
      const id = v4().replaceAll('-', '');
      row.columns[index].list[newIndex] = {
        ...cloneDeep(row.columns[index].list[newIndex]),
        id,
        element_code: `${row.columns[index].list[newIndex].element_code}`
          ? `${row.columns[index].list[newIndex].element_code}`
          : `${row.columns[index].list[newIndex].element_control}_${id}`,
      };
      if (
        row.columns[index].list[newIndex].element_control === 'radio' ||
        row.columns[index].list[newIndex].element_control === 'checkbox' ||
        row.columns[index].list[newIndex].element_control === 'select'
      ) {
        row.columns[index].list[newIndex] = {
          ...row.columns[index].list[newIndex],
        };
      }
      if (row.columns[index].list[newIndex].element_control === 'grid') {
        row.columns[index].list[newIndex] = {
          ...row.columns[index].list[newIndex],
          columns: row.columns[index].list[newIndex].columns.map((item: any) => {
            return {
              span: item.span,
              list: item.list,
            };
          }),
        };
      }
      updateWidgetFormSelectCore(row.columns[index].list[newIndex]);
    } else if (row.element_control === 'tabs') {
      const id = v4().replaceAll('-', '');
      row.panes[index].list[newIndex] = {
        ...cloneDeep(row.panes[index].list[newIndex]),
        id,
        element_code: `${row.panes[index].list[newIndex].element_code}`
          ? `${row.panes[index].list[newIndex].element_code}`
          : `${row.panes[index].list[newIndex].element_control}_${id}`,
      };
      if (
        row.panes[index].list[newIndex].element_control === 'radio' ||
        row.panes[index].list[newIndex].element_control === 'checkbox' ||
        row.panes[index].list[newIndex].element_control === 'select'
      ) {
        row.panes[index].list[newIndex] = {
          ...row.panes[index].list[newIndex],
        };
      }
      if (row.panes[index].list[newIndex].element_control === 'tabs') {
        row.panes[index].list[newIndex] = {
          ...row.panes[index].list[newIndex],
          panes: row.panes[index].list[newIndex].panes.map((item: any) => {
            return {
              name: `${row.panes[index].list[newIndex].element_control}_${v4().replaceAll(
                '-',
                '',
              )}`,
              label: item.label,
              list: item.list,
            };
          }),
        };
      }
      updateWidgetFormSelectCore(row.panes[index].list[newIndex]);
    } else if (row.element_control === 'divLayout') {
      const id = v4().replaceAll('-', '');
      row.div_list[index].list[newIndex] = {
        ...cloneDeep(row.div_list[index].list[newIndex]),
        id,
        element_code: `${row.div_list[index].list[newIndex].element_code}`
          ? `${row.div_list[index].list[newIndex].element_code}`
          : `${row.div_list[index].list[newIndex].element_control}_${id}`,
      };
      if (
        row.div_list[index].list[newIndex].element_control === 'radio' ||
        row.div_list[index].list[newIndex].element_control === 'checkbox' ||
        row.div_list[index].list[newIndex].element_control === 'select'
      ) {
        row.div_list[index].list[newIndex] = {
          ...row.div_list[index].list[newIndex],
        };
      }
      if (row.div_list[index].list[newIndex].element_control === 'divLayout') {
        row.div_list[index].list[newIndex] = {
          ...row.div_list[index].list[newIndex],
          div_list: row.div_list[index].list[newIndex].div_list.map((item: any) => {
            return {
              list: item.list,
            };
          }),
        };
      }
      updateWidgetFormSelectCore(row.div_list[index].list[newIndex]);
    } else {
      const id = v4().replaceAll('-', '');
      row.panel[index].list[newIndex] = {
        ...cloneDeep(row.panel[index].list[newIndex]),
        id,
        element_code: `${row.panel[index].list[newIndex].element_code}`
          ? `${row.panel[index].list[newIndex].element_code}`
          : `${row.panel[index].list[newIndex].element_control}_${id}`,
      };
      if (
        row.panel[index].list[newIndex].element_control === 'radio' ||
        row.panel[index].list[newIndex].element_control === 'checkbox' ||
        row.panel[index].list[newIndex].element_control === 'select'
      ) {
        row.panel[index].list[newIndex] = {
          ...row.panel[index].list[newIndex],
        };
      }
      if (row.panel[index].list[newIndex].element_control === 'foldedPanel') {
        row.panel[index].list[newIndex] = {
          ...row.panel[index].list[newIndex],
          panel: row.panel[index].list[newIndex].panel.map((item: any) => {
            return {
              list: item.list,
            };
          }),
        };
      }
      updateWidgetFormSelectCore(row.panel[index].list[newIndex]);
    }
  };

  const handleButtonMoveAdd = (event: any, row: any, name?: string) => {
    const { newIndex, oldIndex, item } = event;
    if (name === 'buttonArea') {
      row.list[newIndex].width = '';
    }
    let list;
    if (props.list) {
      list = JSON.parse(JSON.stringify(props.list));
    } else {
      list = row.list;
    }
    if (item.className.includes('data-grid')) {
      item.tagName === 'DIV' && list.splice(oldIndex, 0, row.list[newIndex]);
      row.list.splice(newIndex, 1);
      return false;
    }
    const id = v4().replaceAll('-', '');
    row.list[newIndex] = {
      ...row.list[newIndex],
      id,
      element_code: `${row.list[newIndex].element_code}`
        ? `${row.list[newIndex].element_code}`
        : `${row.list[newIndex].element_control}_${id}`,
    };
    if (
      row.list[newIndex].element_control === 'radio' ||
      row.list[newIndex].element_control === 'checkbox' ||
      row.list[newIndex].element_control === 'select'
    ) {
      row.list[newIndex] = {
        ...row.list[newIndex],
      };
    }
    updateWidgetFormSelectCore(row.list[newIndex]);
  };
  const handleItemClick = (row: any) => {
    emit('update:widgetFormSelectCore', row);
  };
  const updateWidgetFormSelectCore = (row: any) => {
    emit('update:widgetFormSelectCore', row);
  };
  const handleListInsert = (id: string, list: any[], obj: any, area?: string, allData?: any[]) => {
    const newList: any[] = [];
    // 复制对象及子对象生成新的id
    const getElementId = (obj: any) => {
      const UUID = v4().replaceAll('-', '');
      obj.id = UUID;
      obj.element_code = `${obj.element_control}_${UUID}`;
      if (obj.columns) {
        obj.columns.forEach((col: any) => {
          col.list.forEach((it: any) => getElementId(it));
        });
      }

      if (obj.panes) {
        obj.panes.forEach((pane: any) => {
          pane.list.forEach((it: any) => getElementId(it));
        });
      }

      if (obj.panel) {
        obj.panel.forEach((panelItem: any) => {
          panelItem.list.forEach((it: any) => getElementId(it));
        });
      }
      // 优化div包裹布局内容复制
      if (obj.div_list) {
        obj.div_list.forEach((panelItem: any) => {
          panelItem.list.forEach((it: any) => getElementId(it));
        });
      }

      if (obj.list) {
        obj.list.forEach((it: any) => getElementId(it));
      }
    };
    [obj].forEach((item) => getElementId(item));
    if (allData && area) {
      allData[area].forEach((item) => {
        if (item.columns) {
          item.columns = item.columns.map((col: any) => ({
            ...col,
            list: handleListInsert(id, col.list, obj),
          }));
        }
        if (item.panes) {
          item.panes = item.panes.map((col: any) => ({
            ...col,
            list: handleListInsert(id, col.list, obj),
          }));
        }
        if (item.panel) {
          item.panel = item.panel.map((col: any) => ({
            ...col,
            list: handleListInsert(id, col.list, obj),
          }));
        }
        if (item.list) {
          for (let i = 0; i < item.list.length; i++) {
            if (item.list[i].id === id) {
              item.list.push(obj);
            }
          }
        }
        if (item.div_list) {
          item.div_list = item.div_list.map((col: any) => ({
            ...col,
            list: handleListInsert(id, col.list, obj),
          }));
        }
      });
    } else {
      if (list) {
        list.forEach((item) => {
          if (item.id === id) {
            newList.push(item);
            newList.push(obj);
          } else {
            if (item.columns) {
              item.columns = item.columns.map((col: any) => ({
                ...col,
                list: handleListInsert(id, col.list, obj),
              }));
            }
            if (item.panes) {
              item.panes = item.panes.map((col: any) => ({
                ...col,
                list: handleListInsert(id, col.list, obj),
              }));
            }
            if (item.panel) {
              item.panel = item.panel.map((col: any) => ({
                ...col,
                list: handleListInsert(id, col.list, obj),
              }));
            }
            if (item.div_list) {
              item.div_list = item.div_list.map((col: any) => ({
                ...col,
                list: handleListInsert(id, col.list, obj),
              }));
            }
            newList.push(item);
          }
        });
      }
    }
    return newList;
  };
  const handleListDelete = (id: string, list: any[]) => {
    const newList: any[] = [];
    if (list) {
      list.forEach((item) => {
        if (item.id !== id) {
          if (item.columns) {
            item.columns = item.columns.map((col: any) => ({
              ...col,
              list: handleListDelete(id, col.list),
            }));
          }
          if (item.panes) {
            item.panes = item.panes.map((col: any) => ({
              ...col,
              list: handleListDelete(id, col.list),
            }));
          }
          if (item.panel) {
            item.panel = item.panel.map((col: any) => ({
              ...col,
              list: handleListDelete(id, col.list),
            }));
          }
          if (item.list) {
            for (let i = 0; i < item.list.length; i++) {
              if (item.list[i].id === id) {
                item.list.splice(i, 1);
              }
            }
          }
          if (item.div_list) {
            item.div_list = item.div_list.map((col: any) => ({
              ...col,
              list: handleListDelete(id, col.list),
            }));
          }
          newList.push(item);
        }
      });
    }
    return newList;
  };
  const updateWidgetFormCore = (list: any) => {
    emit('update:widgetFormCore', list);
  };
  const handleCopyClick = (index: number, list: any[] | any, area: string, allData: any) => {
    const listRef = ref<any>();
    for (let i = 0; i < allData[area].length; i++) {
      if (allData[area][i].list && allData[area][i].list.length) {
        if (allData[area][i].list[index] === list) {
          listRef.value = allData[area][i].list;
        }
        list = listRef.value;
      }
    }
    const id = v4().replaceAll('-', '');
    const oldList = JSON.parse(JSON.stringify(props.list));
    let copyData = {
      ...cloneDeep(list[index]),
      id,
      element_code: `${list[index].element_control}_${id}`,
    };
    if (list[index].panes) {
      list[index].panes.map((item) => {
        if (item.list.length) {
          item.list.map((it) => {
            return {
              ...it,
              id: v4().replaceAll('-', ''),
              element_code: `${it.element_control}_${v4().replaceAll('-', '')}`,
            };
          });
        }
      });
    }
    if (list[index].columns) {
      list[index].columns.map((item) => {
        if (item.list.length) {
          item.list.map((it) => {
            return {
              ...it,
              id: v4().replaceAll('-', ''),
              element_code: `${it.element_control}_${v4().replaceAll('-', '')}`,
            };
          });
        }
      });
    }
    if (list[index].panel) {
      list[index].panel.map((item) => {
        if (item.list.length) {
          item.list.map((it) => {
            return {
              ...it,
              id: v4().replaceAll('-', ''),
              element_code: `${it.element_control}_${v4().replaceAll('-', '')}`,
            };
          });
        }
      });
    }
    if (list[index].div_list) {
      list[index].div_list.map((item) => {
        if (item.list.length) {
          item.list.map((it) => {
            return {
              ...it,
              id: v4().replaceAll('-', ''),
              element_code: `${it.element_control}_${v4().replaceAll('-', '')}`,
            };
          });
        }
      });
    }
    if (!list[index].panes || !list[index].columns || !list[index].panel || !list[index].div_list) {
      list.map((item) => {
        return {
          ...item,
          id: v4().replaceAll('-', ''),
          element_code: `${item.element_control}_${v4().replaceAll('-', '')}`,
        };
      });
    }
    switch (props.area) {
      case 'display_area':
        emit('update:widgetFormCore', {
          ...props.allData,
          display_area: handleListInsert(list[index].id, oldList, copyData, area, allData),
        });
        break;
      case 'hidden_area':
        emit('update:widgetFormCore', {
          ...props.allData,
          hidden_area: handleListInsert(list[index].id, oldList, copyData, area, allData),
        });
        break;
      case 'trash_area':
        emit('update:widgetFormCore', {
          ...props.allData,
          trash_area: handleListInsert(list[index].id, oldList, copyData, area, allData),
        });
        break;
    }
    updateWidgetFormSelectCore(copyData);
  };
</script>
<style scoped>
  :deep(.isButton .el-form-item__content) {
    margin-left: 10px !important;
  }
</style>
<style lang="scss" scoped>
  :deep(.el-divider__text.is-center),
  :deep(.el-divider__text.is-left),
  :deep(.el-divider__text.is-right) {
    background: none;
  }
  .activeSetp {
    :deep(.el-step__icon) {
      background: none;
    }
  }
  :deep(.el-textarea__inner) {
    height: $height;
  }
  .mike_group {
    float: left;
  }
  :deep(.el-form-item__content) {
    display: inline-block;
  }
  .stylEvade {
    height: 30px;
  }
  :deep(.el-input__wrapper) {
    width: $width;
  }
  .display_style {
    width: $width;
    height: $height;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 12px;
    cursor: pointer;
  }
  .foldedPanel-top-button {
    border: 1px solid #eaeefb;
    height: 44px;
    box-sizing: border-box;
    background-color: #fff;
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
    text-align: center;
    cursor: pointer;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .foldedPanel-top {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    .foldIons {
      cursor: pointer;
    }
    .title {
      display: table;
      background-color: var(--el-color-primary);
      position: relative;
      width: 250px;
      height: 40px;
      white-space: nowrap;
      word-break: keep-all;
      line-height: 40px;
      left: 0;
      padding-left: 50px;
      &_text {
        position: relative;
        font-size: 18px;
        color: var(--el-color-white);
      }
      &_before {
        content: '';
        position: absolute;
        background-color: var(--el-color-white);
        width: 15px;
        height: 15px;
        border-radius: 50%;
        left: 20px;
        top: 50%;
        margin-top: -7.5px;
      }
      &_after {
        content: '';
        display: block;
        position: absolute;
        border: 20.5px solid transparent;
        border-left-color: var(--el-color-primary);
        width: 0;
        height: 0;
        left: 100%;
        top: 0;
      }
    }
  }
</style>
